<template>
	<div class="user" id="user">
		<ion-header>
		</ion-header>
		<ion-content class="content">
			<ion-content12>
				<div class="content_left">
					<div class="main">
						<div class="ul_content">
							<ul>
								<li class="ul_title">首页</li>
								<li>
									<a :class="{ 'active': isPath == '/user/data' }" href="#/user/data">数据概况</a>
								</li>
							</ul>
						</div>
						
						<div class="ul_content" style="margin-top: 20px;">
							<ul>
								<li class="ul_title">留言</li>
								<li>
									<a :class="{ 'active': isPath == '/user/wordmanage' }" href="#/user/wordmanage">留言管理</a>
								</li>
								<li>
									<a :class="{ 'active': isPath == '/user/quickword' }" href="#/user/quickword">快捷留言</a>
								</li>
								<li>
									<a :class="{ 'active': isPath == '/user/feedback' }" href="#/user/feedback">反馈意见</a>
								</li>
							</ul>
						</div>
						
						<div class="ul_content" style="margin-top: 20px;">
							<ul>
								<li class="ul_title">商家</li>
								<li>
									<a :class="{ 'active': isPath == '/user/store' }" href="#/user/store">商家管理</a>
								</li>
								<li>
									<a :class="{ 'active': isPath == '/user/addstore' }" href="#/user/addstore">新增商家</a>
								</li>
							</ul>
						</div>
						
						<div class="ul_content" style="margin-top: 20px;">
							<ul>
								<li class="ul_title">系统</li>
								<li>
									<a :class="{ 'active': isPath == '/user/admin' }" href="#/user/admin">管理员设置</a>
								</li>
							</ul>
						</div>

					</div>

				</div>

				<div class="content_right">
					<user-title></user-title>
					<router-view></router-view>
				</div>
			</ion-content12>
		</ion-content>

	</div>
</template>

<script>
	import userTitle from './pannel/user_title';
	export default {
		name: 'user',
		computed: {
			isPath() {
				return this.$route.path;
			},
		},
		data() {
			return {
				title: '',
			}
		}, //定义变量
		components: {
			userTitle,
		}, //注册组件
		methods: { //方法都在这里
		},
		mounted() {
			var that = this;
			//获取banner
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.user {
		.content {
			margin: 80px 0;
		}
		.content_left {
			float: left;
			.main {
				/*border: 2px solid #ededed;*/
				float: left;
				text-align: center;
				width: 200px;
		    height: 885px;
				.ul_content {
					border: 2px solid #ededed;
					ul {
						padding: 20px 20px;
						.ul_title {
							font-size: 18px;
							font-weight: 700;
							height: 50px;
							line-height: 50px;
							border-bottom: 1px solid #283138;
							color: #383a3f;
							margin-bottom: 15px;
						}
						li {
							height: 54px;
							line-height: 54px;
							font-size: 14px;
							a {
								color: #727272;
							}
							.active {
								color: #0093f1;
							}
						}
					}
				}
			}
		}
		.content_right {
			margin-left: 220px;
		}
		.trading_title {
			text-align: left;
			font-size: 14px;
			padding: 30px 0px;
			a {
				color: #9b9b9b;
			}
			.active {
				color: #0093f1;
			}
		}
	}
</style>